<template>
  <view class="nav-container" id="nav" :class="isFixed?'fixed':''">
    <view class="nav">职位类型</view>
    <view class="nav">全城</view>
    <view class="nav">推荐排序</view>
    <view class="nav">服务认证</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isFixed: false,
      }
    },
    mounted:function () {
      this.scrollWatch();
    },
    methods: {
      scrollWatch() {
        const query = uni.createSelectorQuery().in(this);
        query.select('#nav').boundingClientRect(data => {
          console.log("布局位置"+JSON.stringify(data));
          console.log("节点距离顶部位置"+data.top);
        })
      },
    }
  }
</script>

<style lang="scss">
  .nav-container {
    width: 100%;
    padding: 40upx;
    display: flex;
    justify-content: space-between;
    &.fixed {
      position: fixed;
      top: 152upx;
    }
    
    .nav {
      background: #999999;
      width: 23%;
      text-align: center;
      padding: 10upx 0;
    }
  }
</style>
